<script setup>
import { ref, onMounted, reactive } from 'vue'
import { VueUiChestnut } from "vue-data-ui";
import "vue-data-ui/style.css";
import * as echarts from 'echarts';

// 定义config配置数据
const config = ref(
  {"style":{"fontFamily":"inherit","chart":{"backgroundColor":"#FFFFFF","color":"#1A1A1A",
        "layout":{"grandTotal":{"show":true,"color":"#1A1A1A","fontSize":20,"text":"销售总额","bold":true,"prefix":"￥ ","suffix":"","roundingValue":0,"offsetY":0},
          "roots":{"stroke":"#FFFFFF","strokeWidth":5,"useGradient":true,"gradientIntensity":20,"underlayerColor":"#FFFFFF",
            "labels":{"show":true,"adaptColorToBackground":true,"color":"#FFFFFF","fontSize":16,"bold":true,"prefix":"￥ ","suffix":"","roundingValue":0,
              "name":{"color":"#1A1A1A","fontSize":16,"bold":true}}},
          "verticalSeparator":{"stroke":"#FFFFFF","strokeWidth":5},"links":{"opacity":10},
          "branches":{"stroke":"#FFFFFF","strokeWidth":0,"borderRadius":6,"useGradient":true,"gradientIntensity":20,"underlayerColor":"#FFFFFF","widthRatio":1.5,
            "labels":{"show":true,"color":"#1A1A1A","fontSize":14,"bold":true,
              "dataLabels":{"show":true,"fontSize":14,"hideUnderValue":5,"roundingValue":0,"roundingPercentage":0,"prefix":"￥ ","suffix":""}}},
          "nuts":{"useGradient":true,"gradientIntensity":30,"offsetX":0,
            "selected":{"useMotion":true,"useGradient":true,"gradientIntensity":40,"roundingValue":0,"roundingPercentage":0,
              "labels":{"dataLabels":{"hideUnderValue":5,"color":"#1A1A1A","fontSize":12,"bold":true,"prefix":"￥ ","suffix":""},
                "core":{"total":{"color":"#1A1A1A","fontSize":14,"bold":true},
                  "value":{"color":"#1A1A1A","fontSize":14,"bold":true,"prefix":"￥ ","suffix":""}}}}},
          "legend":{"fontSize":16,"roundingValue":0,"roundingPercentage":0,"prefix":"￥ ","suffix":""},
          "title":{"text":"品类销售统计","color":"#1A1A1A","fontSize":20,"bold":true,"offsetY":0,
            "subtitle":{"text":"2023年","color":"#1A1A1A","fontSize":16,"bold":false,"offsetY":0}}}}},
    "table":{"show":false,"responsiveBreakpoint":400,
      "th":{"backgroundColor":"#FFFFFF","color":"#1A1A1A","outline":"none",
        "translations":{"rootName":"品类","rootValue":"总值","rootToTotal":"总值占比","branchName":"商品名称","branchValue":"商品售额",
        }},
      "td":{"backgroundColor":"#FFFFFF","color":"#1A1A1A","outline":"none","roundingValue"
          :0,"roundingPercentage":0}},"userOptions":{"show":true},"translations"
      :{"total":"Total","proportionToTree":"of grand total","of":"of"}});

// 定义dataset数据
const dataset = ref([
  {"name":"茶艺类","color":"#42d392","branches"
      :[{"name":"铁观音","value":9520,"breakdown":[{"name":"线上","value":4200,"color":"#ebf6eb"}, {"name":"线下","value":5320,"color":"#10a3f3"}]},
      {"name":"安吉白茶","value":4485,"breakdown":[{"name":"线上","value":1320,"color":"#bbd9ed"}, {"name":"线下","value":3165,"color":"#f5c542"}]},
      {"name":"大红袍","value":19676,"breakdown":[{"name":"线上","value":6940,"color":"#f542e3"}, {"name":"线下","value":12736,"color":"#f5c542"}]},
      {"name":"其他","value":12536,"breakdown":[{"name":"线上","value":6940,"color":"#f542e3"}, {"name":"线下","value":12736,"color":"#f5c542"}]}
    ]},

  {"name":"酒品","color":"#6376DD","branches"
      :[{"name":"贵州茅台","value":13750,"breakdown":[{"name":"Boutique","value":6500,"color":"#f542e3"}, {"name":"Online shop","value":7250,"color":"#f5c542"}]},
      {"name":"山西汾酒","value":14550,"breakdown":[{"name":"Boutique","value":4930,"color":"#f537e3"}, {"name":"Online shop","value":9620,"color":"#f5c542"}]},
      {"name":"泸州老窖","value":10056,"breakdown":[{"name":"Boutique","value":3843,"color":"#f537e3"}, {"name":"Online shop","value":6213,"color":"#f5c542"}]}]},

  {"name":"Asia","color":"#bbd9ed","branches"
      :[{"name":"India","value":9620,"breakdown":[{"name":"Boutique","value":7400,"color":"#f537e3"},{"name":"Online shop","value":2220,"color":"#f5bb42"}]},
      {"name":"Japan","value":12670,"breakdown":[{"name":"Boutique","value":4250,"color":"#f537e3"},{"name":"Online shop","value":8420,"color":"#f5c542"}]},
      {"name":"China","value":26209,"breakdown":[{"name":"Boutique","value":8620,"color":"#f537e3"},{"name":"Online shop","value":17589,"color":"#f5c542"}]}]},

  {"name":"Asia","color":"#f04f19","branches"
      :[{"name":"India","value":9620,"breakdown":[{"name":"Boutique","value":7400,"color":"#f537e3"},{"name":"Online shop","value":2220,"color":"#f5bb42"}]},
      {"name":"Japan","value":12670,"breakdown":[{"name":"Boutique","value":4250,"color":"#f537e3"},{"name":"Online shop","value":8420,"color":"#f5c542"}]},
      {"name":"China","value":26209,"breakdown":[{"name":"Boutique","value":8620,"color":"#f537e3"},{"name":"Online shop","value":17589,"color":"#f5c542"}]}]}]);


// 定义用于存储echarts图表实例的ref
const chartRef = ref(null);
const  activeName = ref('first')
// 定义初始化图表的函数
const initChart = () => {
  if (chartRef.value) {
    const chart = echarts.init(chartRef.value);
    const option = {
      title: {
        text: '特产品类销售占比',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: ['农产品', '水产品', '畜产品', '加工食品', '传统工艺品', '茶艺类', '中药材', '酒类']
      },
      series: [
        {
          name: '销售占比',
          type: 'pie',
          radius: '55%',
          center: ['50%', '47%'],
          roseType: 'radius',
          data: [
            {value: 10, name: '农产品'},
            {value: 23, name: '水产品'},
            {value: 15, name: '畜产品'},
            {value: 25, name: '加工食品'},
            {value: 20, name: '传统工艺品'},
            {value: 35, name: '茶艺类'},
            {value: 30, name: '中药材'},
            {value: 40, name: '酒类'}
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    chart.setOption(option);
  }
};

// 在组件挂载时调用初始化图表函数
onMounted(() => {
  initChart();
});
</script>

<template>
  <div class="explore" style="margin-left: 30px">
    <div class="daohanglan">
      <el-tabs v-model="activeName" @tab-click="handleClick">

        <el-tab-pane label="销售统计" name="first">
          <div style="width:79% ;height:  100%; background-color: #86d7b0">
            <VueUiChestnut
              :dataset="dataset"
              :config="config"
            />
          </div>
        </el-tab-pane>

        <el-tab-pane label="销售占比" name="second">
          <div>
            <div ref="chartRef" style="width: 1200px; height: 470px; "></div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="提交历史" name="third"></el-tab-pane>

        <el-tab-pane label="好物仓库" name="fourth"></el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>
